<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        th,td{
            border: 1px solid #aaaaaa; /*设置边框*/
            padding: 8px 16px; /*设置内间距*/
        }
        thead{
            background: #f5f5f5;/*设置表格头背景*/
        }
        table{
            border-collapse: collapse;/*合并边框*/
            text-align: center; /*文本居中*/
        }
        .active {
            background-color: skyblue;
    </style>
</head>
<body>
    <div id="app">
        <template v-if="books.length">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

                <tr v-for="(item,index) in books" :key="item.id"
                    @click="rowClick(index)"
                    :class="{ active: index === currentIndex }"><!--养成绑定key习惯-->
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>{{formatPrice(item.price)}}</td>
                    <td>
                        <button :disabled="item.count <= 1" @click="decrement(index,item)">-</button>
                        {{item.count}}
                        <button @click="increment(index,item)">+</button>
                    </td>
                    <td>
                        <button @click="removeBook(index, item)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h2>总价：{{formatPrice(totalPrice)}}元</h2>
        </template>

        <template v-else>
            <h1>购物车为空, 请添加喜欢的书籍~</h1>
            <p>商场中有大量的IT类的书籍, 请选择添加学习, 注意保护好自己的头发!</p>
        </template>
    </div>

    <script src="../lib/vue.js"></script>
    <script src="data/data.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    message: "hello vue",
                    books: books,
                    currentIndex: 0
                }
            },
            computed: {
                totalPrice() {
                    return this.books.reduce((preValue, item) => {
                        return preValue + item.price * item.count
                    }, 0)
                }
            },
            methods: {
                formatPrice(price) {
                    return "¥" + price
                },
                increment(index,item){
                    // this.books[index].count++
                    item.count++
                },
                decrement(index,item) {
                    /*if (this.books[index].count>1) {
                        this.books[index].count--
                    }*/
                    item.count--
                },
                removeBook(index, item) {
                    this.books.splice(index, 1)
                },
                rowClick(index) {
                    this.currentIndex = index
                }
            },
            /*从服务器获取数据*/
            /*created(){
                fetch("http://localhost:8080/getBooks").then(res=>{
                    this.books=res
                })
            }*/
        }).mount("#app")
    </script>

</body>
</html>